<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #e8e8e8;
            overflow: hidden;
        }

    </style>
    <script src="js/konva.js"></script>
    <script src="js/Ball.js"></script>

</head>
<body>
<div id="container"></div>
<script>

    //开始：创建舞台
    var stage = new Konva.Stage({
        width: window.innerWidth,
        height: window.innerHeight,
        container: 'container'
    });


    //****一、绘制背景圆,添加到背景层************************
    //00创建背景层
    var bgLayer = new Konva.Layer();
    stage.add(bgLayer);

    //01圆心坐标
    var circleX = stage.width() * 0.5;
    var circleY = stage.height() * 0.5;

    //02半径
    var innerRadius = 150;
    var outerRadius = 250;

    //03绘制
    var bgCircleRing = new Konva.Ring({
        x: circleX,
        y: circleY,
        innerRadius: innerRadius,
        outerRadius: outerRadius,
        stroke: '#ccc',
        strokeWidth: 5,
        dash: [7, 3]
    });
    //04添加到背景层
    bgLayer.add(bgCircleRing);

    //**二、绘制中心文字圆，添加到背景层*****************
    var centerCircle = new Ball({
        x: circleX,
        y: circleY,
        r: 75,
        fillColor: '#525A82',
        strokeColor: '#d6d6d6',
        strokeWidth: 10,
        text: '个人擅长'
    });
    centerCircle.render(bgLayer);

    //05绘制背景层
    bgLayer.draw();


    //**三、绘制内圈圆******************************
    //00创建动画圆层
    var animationLayer = new Konva.Layer();
    stage.add(animationLayer);

    //01创建内组动画组
    var inner_group = new Konva.Group({
        x: circleX,
        y: circleY
    });
    animationLayer.add(inner_group);

    //02绘制PS圆
    var PS = new Ball({
        x: innerRadius * Math.cos(120 * Math.PI / 180),
        y: innerRadius * Math.sin(120 * Math.PI / 180),
        r: 40,
        fillColor: 'pink',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'PS'
    });
    PS.render(inner_group);

    //03绘制DW圆
    var DW = new Ball({
        x: innerRadius * Math.cos(240 * Math.PI / 180),
        y: innerRadius * Math.sin(240 * Math.PI / 180),
        r: 40,
        fillColor: '#99CCCC',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'DW'
    });
    DW.render(inner_group);

    //04绘制FW圆
    var FW = new Ball({
        x: innerRadius * Math.cos(0 * Math.PI / 180),
        y: innerRadius * Math.sin(0 * Math.PI / 180),
        r: 40,
        fillColor: '#FFCC99',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'FW'
    });
    FW.render(inner_group);

    //01创建外组动画组
    var outer_group = new Konva.Group({
        x: circleX,
        y: circleY
    });
    animationLayer.add(outer_group);

    //05绘制HTML5圆
    var HTML5 = new Ball({
        x: outerRadius * Math.cos(120 * Math.PI / 180),
        y: outerRadius * Math.sin(120 * Math.PI / 180),
        r: 45,
        fillColor: '#3366CC',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'HTML5'
    });
    HTML5.render(outer_group);

    //06绘制CSS3圆
    var CSS3 = new Ball({
        x: outerRadius * Math.cos(240 * Math.PI / 180),
        y: outerRadius * Math.sin(240 * Math.PI / 180),
        r: 45,
        fillColor: '#00CC99',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'CSS3'
    });
    CSS3.render(outer_group);

    //07绘制JS圆
    var js = new Ball({
        x: outerRadius * Math.cos(0 * Math.PI / 180),
        y: outerRadius * Math.sin(0 * Math.PI / 180),
        r: 45,
        fillColor: '#9999FF',
        strokeColor: '#d6d6d6',
        strokeWidth: 5,
        text: 'JS'
    });
    js.render(outer_group);

    //绘制动画层
    animationLayer.draw();

    //**四、设置动画*******************

    //00设置1s旋转的度数
    var rotateAngle = 60;

    //01创建动画（每帧都执行）
    var anim = new Konva.Animation(function (frame) {

        //001距离上一帧的时间（毫秒）即：每帧的时间
        var timeDiff = frame.timeDiff/1000;

        //002求出1帧旋转的度数
        var angle = timeDiff * rotateAngle;

        //003内组执行动画
        inner_group.rotate(angle);
        inner_group.getChildren().rotate(-angle);

        //004外组执行动画
        outer_group.rotate(-angle);
        outer_group.getChildren().rotate(angle);

    },animationLayer);

    //02开启动画
    anim.start();

    //03、绑定事件，当鼠标移上去时，旋转速度变慢
    animationLayer.on('mouseover',function () {
        rotateAngle = 20
    });

    //04、绑定事件，当鼠标移开时，旋转速度恢复
    animationLayer.on('mouseout',function () {
        rotateAngle = 60
    })

</script>
</body>
</html>